<template>
  <div class="about-container">
    <el-card class="about-card">
      <template #header>
        <div class="card-header">
          <h3>关于Go-DDNS</h3>
        </div>
      </template>
      
      <div class="about-content">
        <div class="about-logo">
          <img src="@/assets/logo.svg" alt="Go-DDNS Logo">
        </div>
        
        <div class="about-info">
          <h3>Go-DDNS 动态域名解析工具</h3>
          <p>
            Go-DDNS是一个使用Go语言开发的动态域名解析工具，可自动检测您的公网IP地址变化并更新Cloudflare DNS记录。
            该工具支持IPv4和IPv6地址，并提供灵活的配置选项，使您能够轻松管理多个域名。
          </p>
          
          <h4>主要功能</h4>
          <ul>
            <li>自动检测公网IP地址变化</li>
            <li>支持IPv4和IPv6地址</li>
            <li>使用Cloudflare API自动更新DNS记录</li>
            <li>可配置多个域名</li>
            <li>支持自定义IP检测服务</li>
            <li>提供友好的Web配置界面</li>
            <li>支持Docker部署</li>
          </ul>
          
          <h4>技术栈</h4>
          <p>
            <el-tag>Go</el-tag>
            <el-tag>Vue 3</el-tag>
            <el-tag>Element Plus</el-tag>
            <el-tag>Docker</el-tag>
          </p>
          
          <div class="links">
            <a href="https://github.com/username/go-ddns" target="_blank">
              <el-icon><Platform /></el-icon> GitHub
            </a>
            <a href="https://github.com/username/go-ddns/issues" target="_blank">
              <el-icon><WarningFilled /></el-icon> 报告问题
            </a>
            <a href="https://github.com/username/go-ddns/blob/main/LICENSE" target="_blank">
              <el-icon><Document /></el-icon> 许可证
            </a>
          </div>
        </div>
      </div>
    </el-card>
    
    <el-card class="usage-card">
      <template #header>
        <div class="card-header">
          <h3>使用指南</h3>
        </div>
      </template>
      
      <div class="usage-content">
        <el-collapse>
          <!-- 配置说明 -->
          <el-collapse-item title="基本配置" name="1">
            <div class="usage-section">
              <p>配置Go-DDNS只需要以下几个简单步骤：</p>
              <ol>
                <li>
                  <strong>获取Cloudflare API Token</strong>
                  <p>登录Cloudflare控制面板 → 我的账户 → API令牌 → 创建令牌 → 编辑区域DNS（使用模板）</p>
                </li>
                <li>
                  <strong>添加域名</strong>
                  <p>在"DDNS配置"页面输入您要更新的域名（已在Cloudflare管理的域名）</p>
                </li>
                <li>
                  <strong>选择IP版本和更新频率</strong>
                  <p>根据您的网络环境选择IPv4或IPv6，并设置适当的检查间隔</p>
                </li>
                <li>
                  <strong>保存配置</strong>
                  <p>点击"保存配置"按钮使设置生效</p>
                </li>
              </ol>
            </div>
          </el-collapse-item>
          
          <!-- 高级配置 -->
          <el-collapse-item title="高级设置" name="2">
            <div class="usage-section">
              <p>Go-DDNS提供以下高级设置选项：</p>
              <ul>
                <li>
                  <strong>自定义IP检测服务</strong>
                  <p>您可以添加、移除或修改用于检测公网IP地址的服务URL</p>
                </li>
                <li>
                  <strong>Docker部署</strong>
                  <p>使用Docker部署Go-DDNS可简化安装和维护过程</p>
                  <pre>docker-compose up -d</pre>
                </li>
              </ul>
            </div>
          </el-collapse-item>
          
          <!-- 故障排除 -->
          <el-collapse-item title="故障排除" name="3">
            <div class="usage-section">
              <p>如果您遇到问题，请尝试以下步骤：</p>
              <ul>
                <li>
                  <strong>检查API Token权限</strong>
                  <p>确保您的Cloudflare API Token有足够的权限来修改DNS记录</p>
                </li>
                <li>
                  <strong>验证域名所有权</strong>
                  <p>确保域名已正确添加到您的Cloudflare账户中</p>
                </li>
                <li>
                  <strong>检查网络连接</strong>
                  <p>确保服务器可以访问互联网和Cloudflare API</p>
                </li>
                <li>
                  <strong>查看日志</strong>
                  <p>检查应用日志以获取详细的错误信息</p>
                </li>
              </ul>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
    </el-card>
    
    <el-card class="version-card">
      <template #header>
        <div class="card-header">
          <h3>版本信息</h3>
        </div>
      </template>
      
      <div class="version-content">
        <el-descriptions title="系统信息" :column="2" border>
          <el-descriptions-item label="版本">v1.0.0</el-descriptions-item>
          <el-descriptions-item label="更新日期">2023-06-01</el-descriptions-item>
          <el-descriptions-item label="开发者">Go-DDNS团队</el-descriptions-item>
          <el-descriptions-item label="许可证">MIT</el-descriptions-item>
        </el-descriptions>
        
        <el-divider>更新日志</el-divider>
        
        <div class="changelog">
          <div class="changelog-item">
            <h4><el-tag size="small">v1.0.0</el-tag> 2023-06-01</h4>
            <ul>
              <li>初始版本发布</li>
              <li>支持IPv4和IPv6地址更新</li>
              <li>添加Web配置界面</li>
              <li>Docker支持</li>
            </ul>
          </div>
          
          <div class="changelog-item">
            <h4><el-tag size="small">v0.9.0</el-tag> 2023-05-15</h4>
            <ul>
              <li>Beta版本发布</li>
              <li>实现基本的DNS更新功能</li>
              <li>添加配置文件支持</li>
            </ul>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { Platform, WarningFilled, Document } from '@element-plus/icons-vue'

export default {
  name: 'AboutPage',
  components: {
    Platform,
    WarningFilled,
    Document
  }
}
</script>

<style scoped>
.about-card,
.usage-card,
.version-card {
  margin-bottom: 20px;
}

.about-content {
  display: flex;
  align-items: flex-start;
}

.about-logo {
  margin-right: 30px;
}

.about-logo img {
  width: 120px;
}

.about-info {
  flex: 1;
}

.about-info h3 {
  margin-bottom: 15px;
}

.about-info h4 {
  margin: 20px 0 10px;
}

.about-info p {
  margin-bottom: 15px;
  line-height: 1.6;
}

.about-info ul {
  padding-left: 20px;
  margin-bottom: 15px;
}

.about-info ul li {
  margin-bottom: 5px;
}

.about-info .el-tag {
  margin-right: 8px;
}

.links {
  margin-top: 20px;
}

.links a {
  display: inline-block;
  margin-right: 15px;
  color: var(--primary-color);
  text-decoration: none;
}

.links a .el-icon {
  vertical-align: middle;
  margin-right: 5px;
}

.usage-section {
  padding: 10px 0;
}

.usage-section p {
  margin-bottom: 15px;
}

.usage-section ol,
.usage-section ul {
  padding-left: 20px;
  margin-bottom: 15px;
}

.usage-section li {
  margin-bottom: 10px;
}

.usage-section strong {
  display: block;
  margin-bottom: 5px;
}

.usage-section pre {
  background: rgba(255, 255, 255, 0.05);
  padding: 10px;
  border-radius: 4px;
  margin: 10px 0;
  overflow-x: auto;
}

.changelog {
  margin-top: 20px;
}

.changelog-item {
  margin-bottom: 20px;
}

.changelog-item h4 {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

.changelog-item .el-tag {
  margin-right: 10px;
}

.changelog-item ul {
  padding-left: 20px;
}

.changelog-item li {
  margin-bottom: 5px;
}
</style> 